<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.common.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<title>平均成绩展示</title>
<style>
#standard {  
  display: -webkit-flex;  
  -webkit-justify-content: center;  
  -webkit-align-items: center;  
  padding:100px;
}

#box{
		display: -webkit-flex;  
		-webkit-justify-content: right;  
		-webkit-align-items: right;  
		padding:100px;
        
    }
    .text{
        width: 260px;
        border: 1px solid #e2e2e2;
        height: 30px;
        background-repeat: no-repeat;
        background-size: 25px;
        background-position:5px center;
        padding:0 0 0 40px;
    }
    .submit{

	background: #FF6805;
	height:30px;
	width:100px;

}
}

}
</style>
</head>
<body>
<% request.setCharacterEncoding("utf-8"); %>
<div style="position:absolute;z-index:-1;width:100%;height:100%;">
    	<img src="img/2.jpg" width="100%" height="100%" />
</div>
	<div id="standard">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var url = 'ShowAverageServlet';//获得销量、营业额、x轴的数据
        $.getJSON(url).done(function(json) {//向url请求数据，如果成功，将数据放到json
            // 2.从json中获得数据 ，
            score = json.score;//成绩
            exam = json.exam;//x轴
            // 3.配置option
            var option = {
            		color: ['#3398DB'],
                title : {
                    text : '平均分展示'
                },
                tooltip : {},
                legend : {
                    data : [ '成绩' ],
                },
                calculable : true,
                xAxis : {
                	type : 'category',
                    data : exam
                },
                yAxis : {},
                series : [ {
                    name : '成绩',
                    type : 'bar',
                    data : score
                } ],
                toolbox : {
                    show : true,
                    feature : {
                        mark : {
                            show : true
                        },
                        dataView : {
                            show : true,
                            readOnly : false
                        },
                        magicType : {
                            show : true,
                            type : [ 'line', 'bar' ]
                        },
                        restore : {
                            show : true
                        },
                        saveAsImage : {
                            show : true
                        }
                    }
                }
            }

            myChart.setOption(option);
        })
       
    </script>
    
   <div id="box">
   <% request.setCharacterEncoding("utf-8"); %>
		<form action="TransitionServlet"  method="post">
        	<input type="text" name="info" placeholder="请输入学号或姓名" class="text">
        	<input type="submit" value="搜索" class="submit"/>
        </form>
        <form action="SetWeight.jsp"  method="post">
        	<input type="submit" value="重新设置权重" class="submit"/>
        </form>
    </div>
    </div>
</body>
</html>
